<template>
  <ul class="my_list">
    <li v-for="(item, index) in book" :key="index">
      <img :src="item.img" alt="" />
      <p class="desc">{{ item.desc }}</p>
      <section>
        <span style="color: red">{{ item.name }}</span>
        <button @click="saveBook(item)">+</button>
      </section>
    </li>
  </ul>
</template>

<script>
import { mapMutations } from 'vuex';
export default {
  props: {
    book: Array,
  },
  methods: {
    ...mapMutations(['saveBook'])
  },
};
</script>

<style lang="scss" scoped>
.my_list {
  display: flex;
  flex-wrap: wrap;
  li {
    width: 49%;
    box-sizing: border-box;
    padding: 10px;
    background: #fff;
    img {
      width: 100%;
      height: 218px;
    }
    .desc {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
    }
    section {
      display: flex;
      justify-content: space-between;
      button {
        border-radius: 50%;
        background: red;
        color: #fff;
        border: none;
        padding: 0 7px;
      }
    }
  }
}
</style>
